<script setup lang="ts">
import { onMounted, ref, nextTick } from "vue";
import Main from "./main.vue";
const currentPage4 = ref(3);
const pageSize4 = ref(15);
const small = ref(false);
const disabled = ref(false);
const background = ref(true);

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};

onMounted(() => {
  nextTick(() => {
    const el = document.querySelector(".el-pagination__goto");
    el.innerHTML = "跳至";
  });
});
</script>

<template>
  <div class="order-pagination">
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[15, 30, 300, 400]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="->, total, prev, pager, next, sizes, jumper"
      :total="220"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="
        --el-pagination-button-bg-color: #fff;
        --el-pagination-border-radius: 0;
        --el-border-radius-base: 0;
      "
    >
    </el-pagination>
  </div>
</template>

<style lang="scss" scoped>
.order-pagination {
  ::v-deep(.el-pagination__total) {
    font-family: PingFang SC;
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    color: #091a4b;
  }
  ::v-deep(.el-pagination__sizes) {
    .el-select {
      width: 91px;
    }
  }
  ::v-deep(.number) {
    width: 32px;
    height: 32px;
    border: 1px solid #cfd4de;
  }
  ::v-deep(.btn-prev) {
    border: 1px solid #cfd4de;
  }
  ::v-deep(.btn-next) {
    border: 1px solid #cfd4de;
  }
}
</style>
